<style lang="scss" scoped>
.login{
    background: #4485F0;
    width:100%;
    height:100vh;
    position: relative;
    overflow: hidden;
}
.bg_right{
    position:absolute;
    right: 0;
    height: 100%;
}
.box{
    // background:url('../assets/register_bg.png');
    margin: auto;
    width:1080px;
    height: 720px;
    border-right: 3px;
    position: absolute;
    z-index: 2;
    top: 0;bottom: 0;left: 0;right: 0;
    .logo_block{
        position:absolute;
        width:150px;
        height: 100px;
        cursor: pointer;
        left: 30px;
        top:30px;
    }
}
input::placeholder{
    font-size: 12px;
}
.content{
    width:490px;
    padding:10px 100px 0 0 ;
    float: right;
    color: #333;
    .info{
        font-size: 12px;
        margin-bottom: 18px;
    }
    h1{
        font-weight: bold;
        color: #4485F0;
        width:390px;
        line-height: 50px;
        border-bottom: 1px solid #eee;
        font-size:18px;
        padding: 0;
        margin-top: 34px
    }
    .submit{
        border:0;
        font-size: 14px;
        background: #3D85FD;
        width:260px;
        line-height: 20px;
        height:40px;
        box-shadow:0px 5px 10px 5px rgba(32,154,255,0.21);
        border-radius:2px;
    }
    .to_login{
        font-size:14px;
        padding:0 0 0 14px;
        color:#aaa;
        cursor: pointer;
        b{
            color: #333;
        }
    }
}
.form-group{
    width:100%;
    position: relative;
    margin-left: 0;
    margin-bottom: 15px;
    >.icon{
        position:absolute;
        bottom: 9px;
        left: 10px;
    }
    >.icon_right{
        cursor: pointer;
        position:absolute;
        right: 10px;
        bottom: 12px;
    }
}
label{
    font-weight: normal;
    
}
.getCode{
    width:96px;
    background:transparent;
    color: #4485F0;
    box-shadow:0 0 2px 1px #3D85FD;
    border-radius:4px;
    margin-top:-2px;
    font-size: 12px;
    padding: 7px 12px;
}
._login,.forget_pwd{
    margin-top: 86px;
}
input{
    padding-left: 30px;
}
.btn{
    border:1px solid #3D85FD;
    box-shadow: none;
    
}
.agreement{
    padding:0
}
.black{
    color:#333;
}

</style>
<template>
    <div class="login" >
        <img class="bg_left" height="100%" :src="require(`@/assets/${active?'login':'register'}_left.png`)" alt="">
        <div class="box" :style="`background:url(${bg_img[active]});background-size:cover;`">
            <div class="logo_block" @click="$router.push('/')"></div>
            <div class="content register" v-show="!active">
                <h1>欢迎注册派智知产管家</h1>
                <p class="info">提供专利申请、商标分类查询、流程自动控制、关键节点提醒、通知书管理、 财务管理、年费监控、专利工具等功能</p>
               <form class="form-horizontal" >
                    <div class="form-group" style="margin-bottom:10px">
                        <label>请选择您的身份</label>
                        <div>
                            <label style="margin-right:30px">
                                <input type="radio" v-model="fm[0].type" value="个人" name="type"> 个人用户
                            </label>
                            <label>
                                <input type="radio" v-model="fm[0].type" value="企业" name="type"> 企业用户 
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>姓名</label>
                        <img class="icon" src="@/assets/icon/name.svg" alt="">
                        <input type="text" v-model="fm[0].name" class="form-control"  placeholder="请输入您的姓名" >
                    </div>
                    <div class="form-group">
                        <label>手机号</label>
                        <img class="icon" src="@/assets/icon/tel.svg" alt="">
                        <input type="tel" v-model="fm[0].tel" class="form-control" placeholder="请输入您的手机号" >
                    </div>
                    <div class="form-group"  >
                        <label>密码</label>
                        <img class="icon" src="@/assets/icon/lock.svg" alt="">
                        <input  v-model="fm[0].pwd" :type="fm[0].pwd_show?'text':'password'" class="form-control" placeholder="请输入您的密码" >
                        <img class="icon_right" @click="fm[0].pwd_show=!fm[0].pwd_show" :src="fm[0].pwd_show?eye_img:eye_close_img" alt="">
                    </div>
                    <div class="form-group">
                        <label>验证码</label>
                            <img class="icon" src="@/assets/icon/check.svg" alt="">
                        <div>
                            <input v-model="fm[0].verify" type="text" style="width:273px;display:inline-block;margin-right:20px" class="form-control" placeholder="请输入您的密码" >
                            <button type="button" @click="getCode(false)" class="btn getCode">{{fm[0].verify_str}}</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>邀请码(选填) <a style="padding-left:10px;margin-top:3px;text-decoration: underline;color:#4485F0" target="_blank" :href="`http://${!is_online?'beta_':''}www.pizhigu.com/activity`" >点击获取邀请码，享受外观专利99元特价</a></label>
                        <img class="icon" src="@/assets/icon/star.svg" alt="">
                        <input type="text" v-model="fm[0].invite_code" class="form-control" placeholder="请输入邀请码" >
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary btn-lg submit" @click="submit(0)">同意协议并注册专利平台</button>
                        <span class="to_login" @click="jmp(1)">
                            已有账号，<span  class="black">去登录</span> 
                        </span>
                    </div>
                    <div class="checkbox" style="padding-top:0">
                        <label style="font-size:12px;line-height: 22px;">
                            <input type="checkbox" v-model="is_agreement" >
                            我已阅读并接受<a style="color:#3D85FD" @click="jmp(3)">《用户协议》</a>
                        </label>
                    </div>
               </form>
            </div>
            <div class="content _login" v-show="active===1">
                <h1>欢迎登陆派智知产管家</h1>
                <p class="info">为您提供专利、商标、版权业务的专业化全业务流程管理。</p>
               <form class="form-horizontal" >
                   <div class="form-group">
                        <label>手机号</label>
                        <img class="icon" src="@/assets/icon/name.svg" alt="">
                        <input v-model="fm[1].tel" type="tel" class="form-control" placeholder="请输入您的手机号" >
                    </div>
                    <div class="form-group"  >
                        <label>密码</label>
                        <img class="icon" src="@/assets/icon/lock.svg" alt="">
                        <input  v-model="fm[1].pwd" :type="fm[1].pwd_show?'text':'password'" class="form-control" placeholder="请输入您的密码" >
                        <img class="icon_right" @click="fm[1].pwd_show=!fm[1].pwd_show" :src="fm[1].pwd_show?eye_img:eye_close_img" alt="">
                    </div>
                    <div class="form-group">
                        <button type="button" @click="submit(1)" class="btn btn-primary btn-lg submit">立即登陆</button>
                        <span class="to_login" @click="jmp(0)">
                            <span>还没有账号</span>,<span class="black">去注册</span> 
                        </span>
                        <div class="to_login" style="padding:0;margin-top:20px">
                            <span  class="black" @click="jmp(2)">忘记密码</span>
                        </div>
                    </div>
               </form>
            </div>
            <div class="content forget_pwd" v-show="active===2">
                <h1>忘记密码</h1>
                <p class="info">通过登录手机号码和验证码设置新的密码</p>
                <div class="form-group">
                    <label>手机号</label>
                    <img class="icon" src="@/assets/icon/name.svg" alt="">
                    <input v-model="fm[2].tel" type="tel" class="form-control" placeholder="请输入您的手机号" >
                </div>
                <div class="form-group"  >
                    <label>密码</label>
                    <img class="icon" src="@/assets/icon/lock.svg" alt="">
                    <input  v-model="fm[2].pwd1" :type="fm[2].pwd_show?'text':'password'" class="form-control" placeholder="请输入您的密码" >
                    <img class="icon_right" @click="fm[2].pwd_show=!fm[2].pwd_show" :src="fm[2].pwd_show?eye_img:eye_close_img" alt="">
                </div>
                <div class="form-group">
                    <label>验证码</label>
                        <img class="icon" src="@/assets/icon/check.svg" alt="">
                    <div>
                        <input v-model="fm[2].verify" type="text" style="width:274px;display:inline-block;margin-right:20px" class="form-control" placeholder="请输入验证码" >
                        <button type="button" @click="getCode(true)" class="btn getCode">{{fm[2].verify_str}}</button>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" @click="submit(2)" class="btn btn-primary btn-lg submit">立即提交</button>
                    <span class="to_login" @click="jmp(1)">
                        <span class="black">去登录</span> 
                    </span>
                </div>
            </div>
            <div class="content agreement" v-show="active===3">
                <h1>欢迎注册派智知产管家</h1>
                <agreement/>
                <div class="form-group">
                    <button type="button" class="btn btn-primary btn-lg submit" style="margin-top:10px" @click="jmp(0)">我已了解</button>
                </div>
            </div>
        </div>
        <img class="bg_right" :src="require(`@/assets/${active?'login':'register'}_right.png`)">
    </div>

</template>
<script>
import {official_reg,login,reset_pwd,sendSMS} from "@/assets/api"
import {swal} from 'vue-swal'
import agreement from "@/components/agreement"
export default {
    data () {
        return {
            is_agreement:false,
            bg_img:[
                require(`@/assets/register_bg.png`),
                require(`@/assets/login_bg.svg`),
                require(`@/assets/forget_pwd_bg.svg`),
                require(`@/assets/register_bg.png`),
            ],
            eye_img:require(`@/assets/icon/eye_close.svg`),
            eye_close_img:require(`@/assets/icon/eye.svg`),
            eye_is:true,
            active:0,
            fm:[
                {
                    verify_str:'获取验证码',
                    type:'个人',
                    source:'外观99元官网活动页',
                    name:'',
                    tel:'',
                    pwd:'',
                    verify:'',
                    invite_code:'',
                    pwd_show:false,
                },
                {
                    tel:'',
                    pwd:'',
                    pwd_show:false,
                },
                {
                    verify_str:'获取验证码',
                    sence:'find',
                    tel:'',
                    pwd1:'',
                    verify:'',
                    pwd_show:false,
                },
                
            ]
        }
  },
    methods:{
        jmp(num){
            self.location='http://'+this.host+'/login?active='+num
        },
        convertObj(data) {
            let _result = [];
            for (const key in data) {
                let value = data[key];
                if (value.constructor == Array) {
                    value.forEach(function(_value) {
                    _result.push(key + "=" + _value);
                    });
                } else {
                    _result.push(key + '=' + value);
                }
            }
            return _result.join('&');
        },
        submit(num){
            let func=[official_reg,login,reset_pwd][num],data=this.fm[num]
            const field={
                name:'姓名',
                tel:'电话号码',
                pwd:'密码',
                pwd1:'密码',
                verify:'验证码',
            }
            for (const key in data) {
                if(key!='invite_code' && data[key]===''){
                    swal('请填写'+field[key],'','error')
                    return
                }
            }
            if(!num && !this.is_agreement){
                swal('请勾选用户协议','','error')
                return
            }
            if(num===2)
                data.pwd2=data.pwd1
            func({...data,reg_type:0})
            .then(res=>{
                if(res){
                    if(num===1){
                        const obj={
                            expTime:res.data.exp,
                            token:res.data.jwt,
                            name:res.data.info.name,
                            tel:res.data.info.tel,
                            vip:res.data.info.vip,
                            client_id:res.data.info.id,
                            message_unread_count:res.data.message_unread_count,
                        }
                        localStorage.setItem('client_id',obj.client_id)
                        localStorage.setItem('name',obj.name)
                        localStorage.setItem('tel',obj.tel)
                        localStorage.setItem('unique_code',res.data.info.unique_code)
                        self.location=this.cms+'/login?'+this.convertObj(obj)
                    }else{
                        swal(num?'密码已重置，请登陆':'注册完成，请登陆','','success').then(()=>{
                            this.active=1
                        })
                    }
                }
            })
        },
        getCode(is){
            const num=is?2:0
            if(this.fm[num].tel.toString().length!=11){
                swal('电话号码填写错误','','error')
            }
            if(!isNaN(this.fm[num].verify_str))  return 
            this.fm[num].verify_str=60
            sendSMS({
                sence:is?'forget_pwd':'reg',
                tel:this.fm[num].tel
            })
            .then(res=>{
                 if(res){
                    let msg_status=setInterval(()=>{
                    if(this.fm[num].verify_str<=1){
                        this.fm[num].verify_str='获取验证码'
                        clearInterval(msg_status) 
                    }else 
                        this.fm[num].verify_str--
                    },1000)
                }else{
                    this.fm[num].verify_str='获取验证码'
                }
            })
        }
    },
    components:{
        agreement
    },
    created(){
        this.active=+this.$route.query.active || 0
        if(this.$route.query.close){
            localStorage.clear()
        }
        this.fm[0].invite_code=this.$route.query.invite_code || localStorage.getItem('invite_code')
    }

}
</script>